@<template>
  <div class="Carousel">
    <div class="Carouselicon">
      <lunbo></lunbo>
      <div class="timeDrama">
        <h2>新番动态</h2>
        <ul>
          <ol @click="one">
            周一
          </ol>
          <ol @click="two">
            周二
          </ol>
          <ol @click="three">
            周三
          </ol>
          <ol @click="four">
            周四
          </ol>
          <ol @click="five">
            周五
          </ol>
          <ol @click="six">
            周六
          </ol>
          <ol @click="seven">
            周日
          </ol>
        </ul>
        <ul class="timeDramaroom">
          <li v-for="(item, index) in arr1" :key="index">
            <p>{{ item.name }}</p>
            <span>{{ item.text }}</span>
          </li>
        </ul>
      </div>
      <main-2></main-2>
   
      
      
    </div>
  </div>
</template>

<script>
import lunbo from "../components/lunbo.vue";
import Main2  from "../components/Main2.vue"

export default {
  data() {
    return {
      arr1: [],
     
    };
  },
  components: {
    lunbo,
    Main2
   
  },
  methods: {
    one() {
      this.$axios
        .get("http://localhost:8080/text1.json")
        .then((res) => {
          this.arr1 = res.data.slice(1, 5);
        })
        .catch((err) => {
          console.log("失败");
        });
    },
    two() {
      this.$axios
        .get("http://localhost:8080/text1.json")
        .then((res) => {
          this.arr1 = res.data.slice(6, 11);
        })
        .catch((err) => {
          console.log("失败");
        });
    },
    three() {
      this.$axios
        .get("http://localhost:8080/text1.json")
        .then((res) => {
          this.arr1 = res.data.slice(12, 15);
        })
        .catch((err) => {
          console.log("失败");
        });
    },
    four() {
      this.$axios
        .get("http://localhost:8080/text1.json")
        .then((res) => {
          this.arr1 = res.data.slice(15, 20);
        })
        .catch((err) => {
          console.log("失败");
        });
    },
    five() {
      this.$axios
        .get("http://localhost:8080/text1.json")
        .then((res) => {
          this.arr1 = res.data.slice(21, 24);
        })
        .catch((err) => {
          console.log("失败");
        });
    },
    six() {
      this.$axios
        .get("http://localhost:8080/text1.json")
        .then((res) => {
          this.arr1 = res.data.slice(24, 28);
        })
        .catch((err) => {
          console.log("失败");
        });
    },
    seven() {
      this.$axios
        .get("http://localhost:8080/text1.json")
        .then((res) => {
          this.arr1 = res.data.slice(28, 32);
        })
        .catch((err) => {
          console.log("失败");
        });
    },
  },
  created() {
  
  },
  mounted() {
    const weeks = new Array(
      "周日",
      "周一",
      "周二",
      "周三",
      "周四",
      "周五",
      "周六"
    );
    this.nowWeek = weeks[new Date().getDay()];
    console.log(this.nowWeek);
    let ee = document.querySelectorAll("ol");
    // console.log(ee);
    for (let index = 0; index < ee.length; index++) {
      // console.log( ee[index].outerText);
      if (this.nowWeek == ee[index].outerText) {
        console.log(ee[index]);
        this.$axios
          .get("http://localhost:8080/text1.json")
          .then((res) => {
            this.arr1 = res.data.slice(28, 32);
            console.log(res.data);
          })
          .catch((err) => {
            console.log("失败");
          });
        ee[index].style = "background-color: aqua;";
      }
    }
  },
};
</script>
import text from '../test'
<style lang='less'>
.Carousel {
  //   border: 1px solid red;
  //   height: 2000px;
  width: 1370px;
  border-radius: 24px;
}
.Carouselicon {
  //    border: 1px solid red;
  width: 1370px;
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  height: 680px;
}

.timeDrama {
  // border: 1px solid red;
  // height: 170px;
  margin-top: 25px;
  border-radius: 24px;
  height: 180px;
  background-color: rgb(34, 36, 51);
}
.timeDrama h2 {
  margin-left: 20px;
  color: var(--TextColor);
  padding-top: 20px;
}

.timeDrama ul ol {
  float: left;
  // border: 1px solid red;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 5px;
  height: 30px;
  border-radius: 12px;
  margin-left: 9px;
  cursor: pointer;
  color: var(--TextColor);
  font-family: japan;
  background-color: "";
}
.timeDrama ul ol:hover {
  background-color: rgb(7, 117, 117);
}
// .bigbox{
//   border: 1px salmon solid;
//   margin-top: 20px;
// }
.timeDramaroom {
  // border: 1px solid bisque;
  margin-top: 65px;
  display: flex;
}
.timeDramaroom li {
  // border: 1px solid rgb(22, 230, 167);
  list-style-type: none;
  display: inline-block;
  justify-content: center;
  margin-left: 20px;
  border-radius: 6px;
  background-color: var(--SideColor);
}
.timeDramaroom li p {
  font-size: 14px;
  font-family: japan;
  color: var(--TextColor);
  margin-top: -6px;
}
.timeDramaroom li span {
  font-size: 12px;
  display: flex;
  margin-top: -12px;
  color: rgb(149, 153, 156);
}
</style>